<template>
  <van-swipe>
    <template v-for="(item, index) of foodclassfiy" :key="index">
      <van-swipe-item>
        <van-grid :border="false" class="v-grid">
          <template v-for="(i, idx) of item" :key="idx">
            <van-grid-item>
              <div class="v-grid__content">
                <van-image
                  :src="baseUrl + i.image_url"
                  :width="50"
                  :height="50"
                />
                <span>{{ i.title }}</span>
              </div>
            </van-grid-item>
          </template>
        </van-grid>
      </van-swipe-item>
    </template>
  </van-swipe>
  <div class="v-panle">
    <div class="v-panle__title">推荐商家</div>
    <van-sticky>
      <div class="v-panle__order">
        <template v-for="opt of orderOption" :key="opt.orderby">
          <a
            @click="filterResturant(opt.orderby)"
            href="javascript:;"
            class="order_nav"
            :class="{ is_active: orderby === opt.orderby }"
            >{{ opt.label }}</a
          >
        </template>
      </div>
    </van-sticky>
    <template v-for="(item, index) of resturants" :key="index">
      <box-card
        @click="handleCard(item.id)"
        :title="item.name"
        :thumb="item.image_path"
        :sale="item.recent_order_num"
        :rate="item.rating"
        :price="item.float_minimum_order_amount"
        :distance="item.distance"
        :arriveTime="item.order_lead_time"
        :mode="item.delivery_mode"
        :supports="item.supports"
      />
    </template>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { BoxCard } from "../components";

export default defineComponent({
  name: "home",
  components: { BoxCard },
  setup() {
    const { proxy }: any = getCurrentInstance();
    const route = useRoute();
    const router = useRouter()
    const state = reactive({
      orderby: 4,
      foodclassfiy: [],
      resturants: [],
    });
    const handleCard = (idx:number) => {
      router.push({})
    };
    const getFoodsClassfiy = () => {
      proxy.axios.get("/v2/index_entry").then((res: []) => {
        let index = 0;
        let array: [] = res;
        while (index < res.length) {
          let arr: never[] = array.slice(index, (index += 8));
          state.foodclassfiy.push(arr as never);
        }
      });
    };
    const getResturants = () => {
      let { lat, lng }: any = route.query;
      proxy.axios
        .get(
          `/shopping/restaurants?latitude=${lat}&longitude=${lng}&order_by=${state.orderby}`
        )
        .then((res: any) => {
          state.resturants = res;
        });
    };
    const filterResturant = (v: number) => {
      state.orderby = v;
      getResturants();
    };

    onMounted(() => {
      getFoodsClassfiy();
      getResturants();
    });

    return {
      ...toRefs(state),
      baseUrl: "https://fuss10.elemecdn.com",
      thumbUrl: "https://elm.cangdu.org/img/",
      orderOption: [
        { orderby: 4, label: "智能排序" },
        { orderby: 5, label: "距离最近" },
        { orderby: 6, label: "销量最高" },
        { orderby: 2, label: "配送速度" },
      ],
      filterResturant,
    };
  },
});
</script>

<style scoped>
</style>